<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Taco Cloud</title>
    <link rel="stylesheet" th:href="@{/style.css}">
</head>
<body>
    <h1>Design your taco!</h1>
    <img th:src="@{/images/TacoCloud.jpg}"/>

    <form method="POST" th:object="${design}">

        <!-- <div th:if="${#fields.hasErrors('name')}">
            <span class="validationError"  th:errors="*{name}"></span>
        </div>
        <div th:if="${#fields.hasErrors('ingredients')}">
            <span class="validationError"  th:errors="*{ingredients}"></span>
        </div> -->

        <div class="grid">
            <div class="ingredient-group" id="wraps">
                <h3>Designate your wrap:</h3>
                <div th:each="ingredient : ${wrap}">
                    <input type="checkbox" name="ingredients" th:value="${ingredient.id}">
                    <label th:text="${ingredient.name}"></label> <br><!-- 用这种方式如何处理 label 的 for 属性呢？以及如何去模板注释？ -->
                </div>
            </div>


            <div class="ingredient-group" id="proteins">
                <h3>Pick your protein:</h3>
                <div th:each="ingredient : ${protein}">
                    <input type="checkbox" name="ingredients" th:value="${ingredient.id}">
                    <label th:text="${ingredient.name}"></label> <br>
                </div>
            </div>


            <div class="ingredient-group" id="cheeses">
                <h3>Choose your cheese:</h3>
                <div th:each="ingredient : ${cheese}">
                    <input type="checkbox" name="ingredients" th:value="${ingredient.id}">
                    <label th:text="${ingredient.name}"></label> <br>
                </div>
            </div>


            <div class="ingredient-group" id="veggies">
                <h3>Determine your veggies:</h3>
                <div th:each="ingredient : ${veggie}">
                    <input type="checkbox" name="ingredients" th:value="${ingredient.id}">
                    <label th:text="${ingredient.name}"></label> <br>
                </div>
            </div>


            <div class="ingredient-group" id="sauces">
                <h3>Select your sauce:</h3>
                <div th:each="ingredient : ${sauce}">
                    <input type="checkbox" name="ingredients" th:value="${ingredient.id}">
                    <label th:text="${ingredient.name}"></label> <br>
                </div>
            </div>

        </div>

        <h3>Name your taco creation:</h3>
        <input type="text" th:field="*{name}">
        <span class="validationError" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
        <br>

        <button>Submit your taco</button>
    </form>
</body>
</html>